<template>
  <div class="nbox2">该功能已下线，无法继续使用。[服务器被拦截]</div>
  <br />
  <div class="dljjc_box3_x" style="min-height: 100vh">
    <n-tabs
      :default-value="data.tab"
      @update:value="set.tabhand"
      type="segment"
      class="lv2nav lv3nav"
    >
      <n-tab-pane name="AgPr" tab="韩服维护公告"> </n-tab-pane>
      <n-tab-pane name="DdXn" tab="开发者笔记"> </n-tab-pane>
    </n-tabs>
    <div style="margin-top: 8px"></div>
    <div class="nbox1">
      <n-pagination
        v-model:page="data.page"
        :page-count="data.count"
        @update:page="set.up_page"
      />
    </div>
    <div style="margin-top: 8px"></div>
    <div class="nbox1">
      <template v-for="item in data.list">
        <template v-if="item.cache == null">
          <div class="_adbox" @click="set.cache(item)">
            [{{ item.mtime }}] {{ item.title }}
          </div>
        </template>
        <template v-else>
          <a :href="`https://kr.ww2.ren/${item.banr}/${item.did}/`" target="_blank">
            <div class="_adbox">[{{ item.mtime }}] {{ item.title }}</div>
          </a>
        </template>
      </template>
    </div>
    <div style="margin-top: 8px"></div>
    <div class="nbox1">
      <n-pagination
        v-model:page="data.page"
        :page-count="data.count"
        @update:page="set.up_page"
      />
    </div>
    <div style="margin-top: 8px"></div>
    <div>
      本功能数据来自：https://cafe.daum.net/GuardianTales/，缓存内容由程序自动生成。
    </div>
  </div>
</template>
<style scoped>
._adbox {
  border-left: solid 3px #686f8c;
  padding: 1rem;
  font-size: 1.1em;
  border-radius: 3px;
  margin-bottom: 8px;
  background: var(--nbox2-bg);
}
</style>
<script>
import { cfg } from "@/cfg/cfg.js";
export default {
  setup() {
    const set = {
      up_page: async (page) => {
        data.page = page;
        cfg.router.replace({
          query: {
            ...cfg.route.query,
            page: page,
          },
        });
        await set.list();
      },
      tabhand: async (id) => {
        data.tab = id;
        data.page = 1;
        cfg.router.replace({
          query: {
            ...cfg.route.query,
            tab: id,
            page: data.page,
          },
        });
        await set.list();
      },
      cache: async (item) => {
        cfg.msg.success("正在检查公告网页缓存，请等待5秒左右。");
        let res = await cfg.axios.get(`${cfg.url}`, {
          params: {
            t: "v2/get",
            t2: "admin/krad",
            type: "cache",
            banr: item.banr,
            did: item.did,
          },
        });
        if (res.data.code == 0) {
          item.cache = true;
          cfg.msg.success("现在可以点击公告访问了");
        } else {
          cfg.msg.error(res.data.msg);
        }
      },
      list: async () => {
        let res = await cfg.axios.get(`${cfg.url}`, {
          params: {
            t: "v2/get",
            t2: "admin/krad",
            type: "list",
            banr: data.tab,
            page: data.page,
          },
        });
        if (res.data.code == 0) {
          data.list = res.data.data;
          data.count = Math.ceil(res.data.count / 20);
        } else {
          cfg.msg.error(res.data.msg);
        }
      },
    };
    let data = reactive({
      loading: false,
      list: [],
      count: 0,
      page: cfg.route.query.page ?? 1,
      tab: cfg.route.query.tab ?? "AgPr",
    });

    onMounted(async () => {
      if (data.page >= 1) {
        data.page = parseInt(data.page);
      }
      await set.list();
    });
    return { data, cfg, set };
  },
};
</script>
